<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>三种不同的处理方式</title>

        <style>
            .wrapper{
                height: 100px ;
                border: 1px solid blue ;
                margin: 15px auto ;
            }
        </style>
    </head>
    <body>

        <!-- 第一种: 直接在 HTML 元素的属性中 指定 事件监听器(侦听器) -->
        <div class="wrapper first" onclick="show(this)"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <script type="text/javascript">
            // 对应 .first 元素
            function show( e ){
                console.log( e );
            }

            let second = document.querySelector( '.second' );
            // 第二种方式
            second.onclick = function( event ){
                console.log( event.target ); // Event.prototype.target
            }

            let third = document.querySelector( '.third' );
            // 第三种方式
            const type = 'click' ;
            const listener = function( event ){
                console.log( event.target );
            }
            third.addEventListener( type , listener , false ) ;// EventTarget.prototype.addEventListener
            
        </script>
        
    </body>
</html>